<template>
  <div class="user_list-page flexC">
    <Tabs value="name1" name="name">
      <TabPane label="项目管理" name="name1" tab="name">
        <div class="user_list-page ">
          <div class="user_list-page " style="margin-bottom: 20px;">
            <div class="pageHead ">
              <p>项目查询</p>
            </div>
            <div class="pageHead">
              <Form ref="prosearchForm" :model="prosearchForm" inline :label-width="80">
                <FormItem label="项目名称" prop="name">
                  <Input
                      type="text"
                      v-model="prosearchForm.name"
                      placeholder="请输入项目名称"
                      clearable
                      style="width: 200px"
                  />
                </FormItem>
                <FormItem style="margin-left: -35px" class="br">
                  <Button @click="prohandleSearch" type="primary" icon="ios-search" style="margin-right: 10px;"
                  >搜索
                  </Button>
                  <Button @click="prohandleReset('prosearchForm')">重置</Button>
                </FormItem>
              </Form>
            </div>
          </div>
          <div class="pageHead" style="padding-left: 0px;">
            <div class="pageHead">

              <div style="display: flex;justify-content: space-between">
                <p>项目列表</p>
                <Button type="primary" size="small" @click="modal1 = true">创建项目</Button>
                <!--        创建项目-->
                <Modal
                    width="950"
                    v-model="modal1"
                    title="创建项目">
                  <Tabs value="name3" name="child-name">
                      <TabPane label="基础信息" name="name3" tab="child-name">
                        <Form ref="project" :model="project" :rules="ruleValidate">
                          <div>
                            <FormItem label="项目名称" prop="name">
                              <Input
                                  type="text"
                                  v-model="project.name"
                                  clearable
                                  style="width: 800px"
                              />
                            </FormItem>
                          </div>

                          <div>
                            <FormItem label="运行环境" prop="stenvs">
                              <Select v-model="project.stenvs" multiple style="width:260px" @on-change="radiovalue1(project.stenvs)">
                                <Option v-for="(item, index) in envsname" :value="item.id" :key="index">{{ item.name }}</Option>
                              </Select>
                            </FormItem>
                          </div>

                          <div>
                            <FormItem label="默认运行环境" prop="defaultenvs">
                              <RadioGroup v-model="project.defaultenvs" @on-change="radiovalue(project.defaultenvs)">
                                  <Radio v-for="(item, index) in defaultenvslist" :label="item.id">{{ item.name }}</Radio>
                              </RadioGroup>
                            </FormItem>
                          </div>

                          <div>
                            <FormItem label="负责人" prop="leader">
                              <Input
                                  type="text"
                                  v-model="project.leader"
                                  clearable
                                  style="width: 800px;margin-left:15px"
                              />
                            </FormItem>
                          </div>


                          <div>
                            <FormItem label="备注" style="margin-left: 38px;">
                              <Input
                                  type="textarea"
                                  v-model="project.desc"
                                  :rows=5
                                  style="width: 800px"
                              />
                            </FormItem>
                          </div>
                  </Form>
                      </TabPane>
                      <TabPane label="全局参数配置" name="name4" tab="child-name">
                        <vue-json-editor
                            style="height: 350px;width: 900px;margin-top: 5px;"
                            v-model="project.param"
                            :showBtns="false"
                            :mode="'code'"
                            lang="zh"
                        />
                      </TabPane>

                  </Tabs>
                  <div slot="footer">
                    <Button @click="cancel">取消</Button>
                    <Button @click="sure('project')" type="primary">确定</Button>
                  </div>
                </Modal>
              </div>


              <!--                      编辑项目-->
              <div style="display: flex;justify-content: space-between">
                <Modal
                    width="950"
                    v-model="modal2"
                    title="编辑项目">
                  <Tabs value="name4" name="up-project">
                      <TabPane label="基本信息" name="name4" tab="up-project">
                        <Form ref="upproject" :model="upproject" :rules="ruleValidate2">
                    <div>
                      <FormItem label="项目名称" prop="name">
                        <Input
                            type="text"
                            v-model="upproject.name"
                            clearable
                            style="width: 800px"
                        />
                      </FormItem>
                    </div>
                    <div>
                      <FormItem label="运行环境" prop="stenvs">
                        <Select v-model="upproject.stenvs" multiple style="width:260px">
                          <Option v-for="(item, key) in envsname2" :value="item.id" :key="key">{{ item.name }}</Option>
                        </Select>
                      </FormItem>
                    </div>

                    <div>
                      <FormItem label="默认运行环境" prop="defaultenvs2">
                        <RadioGroup v-model="upproject.defaultenvs" @on-change="radiovalue2(upproject.defaultenvs)">
                            <Radio v-for="(item, index) in defaultenvslist2" :label="item.id">{{ item.name }}</Radio>
                        </RadioGroup>
                      </FormItem>
                    </div>

                    <div>
                      <FormItem label="负责人" prop="leader">
                        <Input
                            type="text"
                            v-model="upproject.leader"
                            placeholder=""
                            clearable
                            style="width: 800px;margin-left:14px"
                        />
                      </FormItem>
                    </div>

                    <div>
                      <FormItem label="备注" style="margin-left: 38px;">
                        <Input
                            type="textarea"
                            v-model="upproject.desc"
                            :rows=5
                            style="width: 800px"
                        />
                      </FormItem>
                    </div>
                  </Form>
                      </TabPane>
                      <TabPane label="全局参数配置" name="name5" tab="up-project">
                        <vue-json-editor
                            style="height: 350px;width: 900px;margin-top: 5px;"
                            v-model="upproject.param"
                            :showBtns="false"
                            :mode="'code'"
                            lang="zh"
                        />
                      </TabPane>
                  </Tabs>

                  <div slot="footer">
                    <Button @click="cancel2">取消</Button>
                    <Button @click="sure2('upproject')" type="primary">确定</Button>
                  </div>
                </Modal>
              </div>

            </div>

            <!--            项目列表渲染-->
            <div class="pageContent">
              <Table
                  border
                  :columns="columns"
                  :data="data"
                  sortable="custom"
                  ref="table"
                  size="small"
              >
                <template slot-scope="{ row }" slot="name">

                  <strong>{{ row.name }}</strong>
                </template>

                <template slot-scope="{ row,index }" slot="envs">
                  <samp v-for="item in row.envs">
                    <Tag color="blue">{{ item.name }}</Tag>
                  </samp>
                </template>
              </Table>
              <div>
                <Page
                    :total="projectpage.total"
                    :page-size="projectpage.size"
                    :current="projectpage.index"
                    show-total
                    show-elevator
                    show-sizer
                    @on-change="changeSize"
                    @on-page-size-change="changePage"
                    style="margin-top: 20px;"
                />
              </div>
            </div>
          </div>
        </div>
      </TabPane>

      <TabPane label="模块管理" name="name2" tab="name">
        <div class="user_list-page">
          <div class="user_list-page" style="margin-bottom: 20px;">
            <div class="pageHead">
              <p>模块查询</p>
            </div>
            <div class="pageHead">
              <Form ref="mosearchForm" :model="mosearchForm" inline :label-width="80">
                <FormItem label="所属项目" prop="project">
                  <Select v-model="mosearchForm.project" clearable style="width:200px">
                    <Option v-for="(item, key) in projectList" :value="item.id" :key="key">{{ item.name }}</Option>
                  </Select>
                </FormItem>

                <FormItem label="模块名称" prop="name">
                  <Input
                      type="text"
                      v-model="mosearchForm.name"
                      placeholder="请输入项目名称"
                      clearable
                      style="width: 200px"
                  />
                </FormItem>

                <FormItem style="margin-left: -35px" class="br">
                  <Button @click="mohandleSearch" type="primary" icon="ios-search" style="margin-right: 10px;"
                  >搜索
                  </Button>
                  <Button @click="mohandleReset('mosearchForm')">重置</Button>
                </FormItem>
              </Form>
            </div>
          </div>

          <!--          模块列表-->
          <div class="pageHead" style="padding-left: 0px;">
            <div class="pageHead">
              <div style="display: flex;justify-content: space-between">
                <p>模块列表</p>
                <Button type="primary" size="small" @click="clickme">{{ createmodule ? '收起创建模块' : '展开创建模块' }}</Button>
                <Drawer title="创建模块" placement="left" draggable :mask-closable="false" v-model="createmodule"
                        :mask=false>

                  <div>
                    <Select v-model="cremodule.stenvs" clearable style="width:200px;" prefix="logo-freebsd-devil"
                            @on-change="moduproj(cremodule.stenvs)">
                      <Option v-for="item in projectList" :value="item.id" :key="item.name">{{ item.name }}</Option>
                    </Select>
                    <div style="border-bottom: 1px solid #e8eaec;margin:18px 0">
                    </div>
                  </div>

                  <Button long size='small' type="primary"
                          v-if="cremodule.stenvs!=undefined &&  cremodule.stenvs != '' ? true : false"
                          @click="modulemodal=true">创建根模块
                  </Button>
                  <Tree empty-text="请先选择项目" :data="Treedata" :render="renderTree" class="demo-tree-render"></Tree>


                  <Modal
                      width="520"
                      v-model="modulemodal"
                      title="创建模块">
                    <Form ref="moduleModal" :model="moduleModal" :rules="ruleValimodule">
                      <div>
                        <FormItem label="模块名称" prop="name">
                          <Input
                              type="text"
                              v-model="moduleModal.name"
                              clearable
                              style="width: 380px"
                          />
                        </FormItem>
                      </div>
                      <div>
                        <FormItem label="所属项目" prop="project">
                          <Select v-model="moduleModal.project" style="width:380px">
                            <Option v-for="(item, key) in projectList" :value="item.id" :key="key">{{
                                item.name
                              }}
                            </Option>
                          </Select>
                        </FormItem>
                      </div>

                      <div>
                        <FormItem label="备注" style="margin-left: 38px;">
                          <Input
                              type="textarea"
                              v-model="moduleModal.desc"
                              :rows=5
                              style="width: 380px"
                          />
                        </FormItem>
                      </div>
                    </Form>
                    <div slot="footer">
                      <Button @click="modulecancel">取消</Button>
                      <Button @click="modulesure('moduleModal')" type="primary">确定</Button>
                    </div>
                  </Modal>


                  <Modal
                      width="520"
                      v-model="upmodal"
                      title="编辑模块">
                    <Form ref="upmoduleModal" :model="upmoduleModal" :rules="ruleValimodule">
                      <div>
                        <FormItem label="模块名称" prop="name">
                          <Input
                              type="text"
                              v-model="upmoduleModal.name"
                              clearable
                              style="width: 380px"
                          />
                        </FormItem>
                      </div>
                      <div>
                        <FormItem label="所属项目" prop="project">
                          <Select v-model="upmoduleModal.project" style="width:380px">
                            <Option v-for="(item, key) in upmodulename" :value="item.id" :key="key">{{
                                item.name
                              }}
                            </Option>
                          </Select>
                        </FormItem>
                      </div>

                      <div>
                        <FormItem label="备注" style="margin-left: 38px;">
                          <Input
                              type="textarea"
                              v-model="upmoduleModal.desc"
                              :rows=5
                              style="width: 380px"
                          />
                        </FormItem>
                      </div>
                    </Form>
                    <div slot="footer">
                      <Button @click="upmodal = false">取消</Button>
                      <Button @click="upmodulebt('upmoduleModal')" type="primary">确定</Button>
                    </div>
                  </Modal>
                </Drawer>
              </div>
            </div>


            <!--      模块列表渲染-->
            <div class="pageContent">
              <Table
                  border
                  :columns="moduleList"
                  :data="moduledata"
                  sortable="custom"
                  ref="table"
                  size="small"
              >
                <template slot-scope="{ row,index }" slot="project">
                  <samp>
                    {{ row.project.name }}
                  </samp>
                </template>
              </Table>
              <div>
                <Page
                    :total="modulepage.total"
                    :page-size="modulepage.size"
                    :current="modulepage.index"
                    show-total
                    show-elevator
                    show-sizer
                    @on-change="modulechangeSize"
                    @on-page-size-change="modulechangePage"
                    style="margin-top: 20px;"
                />
              </div>
            </div>
          </div>
        </div>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>
import {
  modulelist,
  projectlist,
  envnamelist,
  pronames,
  projectde,
  projectcr,
  projectup,
  findmodule,
  moduleadd,
  updatamodule,
  dedatamodule,
  envlist

} from '../../api/api'
import vueJsonEditor from "vue-json-editor";


export default {
  name: "project_list",
  components: {vueJsonEditor},
  modal_loading: false,
  data() {
    return {
      // defaultenvslist2:[],
      projectpage: {
        index: 1,
        size: 10,
        total: 50
      },
      modulepage: {
        index: 1,
        size: 10,
        total: 50
      },
      childmodule: [],
      Treedata: [],
      proenvsnames: [],
      stenvs: '',
      envsname: [],
      envsname2: [],
      ponameslist: [],
      upmodulename: [],
      upmodule_id: '',
      projectList: [],
      title1: true,
      project_id: '',
      project: {
        name: '',
        stenvs: [],
        leader: '',
        defaultenvs: '',
        desc: '',
        param:{}
      },
      upproject: {
        name: '',
        stenvs: [],
        leader: '',
        defaultenvs:'',
        desc: '',
        param: ''
      },
      cremodule: {
        stenvs: ''
      },
      moduleModal: {
        name: '',
        project: '',
        desc: '',
        parent: ''
      },
      upmoduleModal: {
        name: '',
        project: '',
        desc: '',
        parent: ''
      },
      modal1: false,
      modal2: false,
      createmodule: false,
      modulemodal: false,
      upmodal: false,
      data: [],
      moduledata: [],
      enterTitle: '',
      prosearchForm: {
        name: '',
      },
      mosearchForm: {
        project:"",
        name: '',
      },
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "项目名称",
          slot: "name",
          align: "center",
          minWidth: 125,
          width: 300,
        },
        {
          title: "项目环境",
          slot: 'envs',
          align: "center",
          minWidth: 125,
          width: 350,
        },
        {
          title: "备注",
          key: "desc",
          align: "center",
          width: 400,
          render: (h, params) => {
            return h('div', params.row.desc || '-')
          }
        },
        {
          title: "负责人",
          key: "leader",
          align: "center",
          width: 309,
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            return h("div", [
              h(
                  "a",
                  {

                    on: {
                      click: () => {
                        this.edit('upproject', params.row);
                      },
                    },
                  },
                  "编辑"
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h('Poptip', {
                style: {
                  color: '#ED4014'
                },
                props: {
                  confirm: true,
                  transfer: true,
                  placement: 'left-end',
                  title: '确定要删除吗！',
                  type: 'error',
                  size: 'small',
                },
                on: {
                  'on-ok': () => {
                    this.remove(params.row);
                  }
                }
              }, '删除'),
            ])
                ;

          },
        },
      ],
      moduleList: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "模块名称",
          key: "name",
          align: "center",
          minWidth: 125,
          width: 300,
        },
        {
          title: "所属项目",
          slot: 'project',
          align: "center",
          minWidth: 125,
          width: 350,
        },
        {
          title: "测试人员",
          key: "tester",
          align: "center",
          width: 400,
          render: (h, params) => {
            return h('div', params.row.tester || '-')
          }
        },
        {
          title: "备注",
          key: "desc",
          align: "center",
          width: 309,
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            return h("div", [
              h(
                  "a",
                  {

                    on: {
                      click: () => {
                        this.moduleedit('upproject', params.row);
                      },
                    },
                  },
                  "编辑"
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h('Poptip', {
                style: {
                  color: '#ED4014'
                },
                props: {
                  confirm: true,
                  transfer: true,
                  placement: 'left-end',
                  title: '确定要删除吗！',
                  type: 'error',
                  size: 'small',
                },
                on: {
                  'on-ok': () => {
                    this.deletemodule(params.row);
                  }
                }
              }, '删除'),
            ])
                ;

          },
        },
      ],
      ruleValidate: {
        name: [
          {required: true, message: '请输入项目名称', trigger: 'blur'}
        ],
        stenvs: [
          {required: true, message: '请选择运行环境', trigger: 'blur', type: 'array'},
        ],
        // defaultenvs: [
        //   {required: true, message: '请选择默认运行环境', trigger: 'blur'},
        // ],
        leader: [
          {required: true, message: '请填写负责人', trigger: 'blur'},
        ],
      },
      ruleValidate2: {
        name: [
          {required: true, message: '请输入项目名称', trigger: 'blur'}
        ],
        stenvs: [
          {required: true, message: '请选择运行环境', trigger: 'blur', type: 'array'},
        ],
        leader: [
          {required: true, message: '请填写负责人', trigger: 'blur'},
        ],
      },

      ruleValimodule: {
        name: [
          {required: true, message: '请输入项目名称', trigger: 'blur'}
        ],
        project: [
          {required: true, message: '请选择所属项目', trigger: 'blur'},
        ],
      }
    }
  },
  created() {
    this.getprolist();
    this.proname();
    this.envnames();
    this.module_list();

  },
  mounted() {

  },
  computed: {
    defaultenvslist() {
      let envs = this.envsname.filter((item)=>
      this.project.stenvs.includes(item.id)
      );
      if (envs.length===1) {
        this.project.defaultenvs = envs[0].id;
      }
      return envs;
    },

    defaultenvslist2() {
      let envs = this.envsname2.filter((item)=>
      this.upproject.stenvs.includes(item.id)
      );
      if (envs.length===1) {
        this.upproject.defaultenvs = envs[0].id;
      }
      return envs;
    },
  },
  methods: {

    radiovalue(item) {
      console.log(item)
    },

    radiovalue2(item) {
      console.log(item)
    },

    radiovalue1(item) {
      console.log(item)
    },

    envnames() {
      envnamelist().then(res => {
        this.envsname = res.data.data
      })
    },
    clickme() {
      this.createmodule = !this.createmodule
    },

    getprolist() {
      let data = {
        'size': this.projectpage.size,
        'page': this.projectpage.index
      }
      projectlist(data).then(res => {
        let data = res.data.data
        this.data = data
        this.projectpage.total = res.data.count
      })


    },
    changeSize(e) {
      let data = {
        'size': this.projectpage.size,
        'page': e
      }
      envlist(data).then(res => {
        let data = res.data.data
        this.data = data
        this.projectpage.total = res.data.count

      })
    },
    changePage(e) {
      let data = {
        'size': e,
        'page': this.projectpage.index
      }
      envlist(data).then(res => {
        let data = res.data.data
        this.data = data
        this.projectpage.total = res.data.count
      })
    },


    proname() {
      pronames().then(res => {
        this.projectList = res.data.data
        this.modulename = res.data.data
        this.upmodulename = res.data.data
      })
    },

    prohandleSearch() {
      projectlist(this.prosearchForm).then(res => {
        this.data = res.data.data
        this.$Message.success('搜索成功！')
      })
    },

    prohandleReset(name) {
      this.getprolist()
      this.$refs[name].resetFields();
    },

    mohandleSearch() {
      modulelist(this.mosearchForm).then(res => {
        this.moduledata = res.data.data
        this.$Message.success('搜索成功！')
      })
    },

    mohandleReset(name) {
      this.module_list()
      this.$refs[name].resetFields();
    },

    remove(v) {
      projectde(v.id).then(res => {
        this.$Message.success("删除成功！");
        this.getprolist()
        this.proname()
      })
    },

    deletemodule(v) {
      dedatamodule(v.id).then(res => {
        this.$Message.success("删除成功！");
        this.getprolist()
        this.module_list()
      })
    },

    cancel() {
      this.modal1 = false
    },

    cancel2() {
      this.modal2 = false
    },

    modulecancel() {
      this.modulemodal = false
    },

    sure(name) {
      this.$refs[name].validate((valid) => {
        let stenvs = this.project.stenvs
        let data  = []
        for (let i=0; i<stenvs.length; i++){
          // delete stenvs[i].base_url
          // delete stenvs[i].create_time
          // delete stenvs[i].desc
          // delete stenvs[i].is_active
          // delete stenvs[i].name
          data.push(stenvs[i])
        }

        if (valid) {
          const datas = {
            'name': this.project.name,  //项目名
            'envs': data, //所选环境
            'leader': this.project.leader, //负责人
            'default_envs': this.project.defaultenvs,    // 默认环境
            'desc': this.project.desc,
            'param': JSON.stringify(this.project.param)
          }
          projectcr(datas).then(res => {
            this.modal1 = false
            this.$Message.success('项目新增成功！')
            this.getprolist()
            this.proname()
          })
        }
      })
    },

    edit(name, v) {
      this.upproject.defaultenvs = v.default_envs
      this.modal2 = true
      this.project_id = v.id
      this.upproject.name = v.name
      this.upproject.leader = v.leader
      this.upproject.desc = v.desc
      this.upproject.param = JSON.parse(v.param)
      this.envsname2 = this.envsname
      let list = []
      for (let i = 0; i < v.envs.length; i++) {
        list.push(v.envs[i].id)
      }
      this.upproject.stenvs = list
    },

    moduleedit(name, v) {
      this.upmodule_id = v.id
      this.upmodal = true
      this.upmoduleModal.name = v.name
      this.upmoduleModal.project = v.project.id
      this.upmoduleModal.desc = v.desc
    },

    sure2(name) {
      debugger
      const datas = {
        'name': this.upproject.name,
        'leader': this.upproject.leader,
        'envs': this.upproject.stenvs,
        'desc': this.upproject.desc,
        'param': JSON.stringify(this.upproject.param)
      }
      this.$refs[name].validate((valid) => {
        if (valid) {
          projectup(this.project_id, JSON.stringify(datas)).then(res => {
            this.getprolist()
            this.modal2 = false
            this.$Message.success('修改项目成功!');
            this.proname()
          })
        }
      })
    },

    modulesure(name) {
      const datas = {
        'name': this.moduleModal.name,
        'project': this.moduleModal.project,
        'desc': this.moduleModal.desc,
        'parent': this.moduleModal.parent

      }
      this.$refs[name].validate((valid => {
        if (valid) {
          if (this.childmodule.id === undefined) {
            moduleadd(datas).then(res => {
              this.modulemodal = false
              this.$Message.success('创建根模块成功')
              this.module_list()
              this.moduproj()
              this.$refs['moduleModal'].resetFields();
            })
          } else {
            const datas2 = {
              'name': this.moduleModal.name,
              'project': this.moduleModal.project,
              'desc': this.moduleModal.desc,
              'parent': this.childmodule.id
            }
            moduleadd(datas2).then(res => {
              this.modulemodal = false
              this.$Message.success('创建子模块成功')
              this.module_list()
              this.moduproj()
              this.$refs['moduleModal'].resetFields();
            })
          }

        }
      }))
    },


    module_list() {
      let data = {
        'size': this.modulepage.size,
        'page': this.modulepage.index
      }
      modulelist(data).then(res => {
        // this.moduledata = res.data.data
        let data = res.data.data
        this.moduledata = data
        this.modulepage.total = res.data.count
      })
    },
    modulechangeSize(e) {
      let data = {
        'size': this.modulepage.size,
        'page': e
      }
      envlist(data).then(res => {
        let data = res.data.data
        this.data = data
        this.projectpage.total = res.data.count

      })
    },
    modulechangePage(e) {
      let data = {
        'size': e,
        'page': this.modulepage.index
      }
      envlist(data).then(res => {
        let data = res.data.data
        this.data = data
        this.projectpage.total = res.data.count
      })
    },

    moduproj() {
      if (this.cremodule.stenvs) {
        findmodule(this.cremodule.stenvs).then(res => {
          let data = res.data.data
          debugger
          data = data.map((item) => {
            return {
              id: item.id,
              title: item.name,
              parent: item.parent,
              project: item.project,
              floor: item.floor,
              desc: item.desc,
              expand: true,
              selected: true,
            }
          })
          let arrayToTree = require("array-to-tree");
          this.Treedata = arrayToTree(data, {
            parentProperty: "parent",
            childrenProperty: "children",
            customID: "id",
          });
        })
      } else {
        this.Treedata = []
      }

    },

    renderTree(h, {root, node, data}) {
      return h('span', {
            class: ['ivu-tree-title'], style: {
              display: 'inline-block',
              justifyContent: 'space-between',
              alignItems: 'center',
              width: '100%',
            },
          },
          [
            h('span', {class: 'ivu-tree-title'}, data.title),
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'md-remove',
              }),
              style: {
                borderStyle: 'none',
                backgroundColor: 'transparent',
                color: '#ED4014',
                width: '25px',
                height: '25px',
                float: 'right',
              },
              on: {
                click: () => {
                  this.demodule(data)
                }
              }
            }),
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'md-create',
              }),
              style: {
                border: 'none',
                backgroundColor: 'transparent',
                color: '#2D8CF0',
                width: '25px',
                height: '25px',
                float: 'right',
              },
              on: {
                click: () => {
                  this.upmodule(data)
                }
              }
            }),
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'ios-add',
              }),
              style: {
                border: 'none',
                color: '#2D8CF0',
                backgroundColor: 'transparent',
                width: '25px',
                height: '25px',
                float: 'right',
              },
              on: {
                click: () => {
                  this.appendmodule(data)
                }
              }
            }),
          ]);
    },


    // 创建子模块
    appendmodule(data) {
      this.childmodule = data
      this.modulemodal = true
    },

    upmodule(data) {
      this.upmodule_id = data.id
      this.upmodal = true
      this.upmoduleModal.name = data.title
      this.upmoduleModal.project = data.project
      this.upmoduleModal.desc = data.desc

    },

    upmodulebt(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          const datas = {
            'name': this.upmoduleModal.name,
            'project': this.upmoduleModal.project,
            'desc': this.upmoduleModal.desc
          }
          updatamodule(this.upmodule_id, datas).then(res => {
            this.upmodal = false
            this.$Message.success('修改模块成功！')
            this.module_list()
            this.moduproj()

          })
        }
      })
    },

    demodule(data) {
      dedatamodule(data.id).then(res => {
        this.moduproj()
        this.module_list()
        this.$Message.success('删除成功！')
      })
    },
  },
  watch: {},
  filters: {}
}
</script>

<style lang="less">
.jsoneditor-vue {
  height: 100%;
}
.user_list-page {
  .pageContent {
    & > ul {
      & > li {
        border-bottom: 1px solid #e8eaec;
        padding: 12px 0;

        & > div:first-child {
          margin-bottom: 16px;

          & > span:first-child {
            margin-right: 16px;
          }

          & > span:last-child {
            color: rgba(0, 0, 0, .85);
            font-size: 16px;
          }
        }

        & > div:nth-child(3) {
          margin-top: 8px;

          & > span:nth-child(1) {
            margin: 2px 4px 2px 0;
            padding: 0 8px;
            border: 1px solid #e8eaec;
            border-radius: 3px
          }

          /*已验证邮箱*/

          .isCheck {
            background: #f6ffed;
            border-color: #b7eb8f !important;
            color: #52c41a !important;
          }

          .noCheck {
            background: #fff1f0;
            border-color: #ffa39e !important;
            color: #f5222d !important;
          }

          & > p {
            span {
              margin: 2px 4px 2px 0;
              padding: 0 8px;
              border: 1px solid #e8eaec;
              border-radius: 3px
            }

            .ordinary {
              background: #e6f7ff;
              border-color: #91d5ff !important;
              color: #1890ff !important;
            }

            .admin {
              background: #f9f0ff;
              border-color: #d3adf7 !important;
              color: #722ed1 !important;
            }

            .super {
              background: #fff2e8;
              border-color: #ffbb96 !important;
              color: #fa541c !important;
            }

            .test {
              background: #ffdff5;
              border-color: #fcc3f5 !important;
              color: #c449b8 !important;
            }
          }

          button {
            margin-left: 16px;
          }
        }

        & > div:nth-child(4) {
          margin-top: 8px;

          button {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
